<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置代码 */
        a{
            text-decoration: none;
            color: #333;
        }

        /* 公共的css 这里暂时没写，只是可以这样做，因为很多地方都要用精灵图，直接这样写可以少写代码 */
        .sprite_01{
            background-image: url(../images/music_sprite_01.png);
            display: inline-block;
        }
        .sprite_02{
            background-image: url(../images/music_sprite_02.png);
            display: inline-block;
        }

        /* 还能进一步抽取 因为精灵图里面有些图标不一定只用一次 */
        .sprite_02_icon_music{
            width: 14px;
            height: 11px;
            background-position: 0 -24px;
        }


        .item{
            width: 140px;
            margin: 0 auto;
        }
        .top{
            position: relative;
        }
        .item .top img{
            /* 将图片下面的多出来的区域去除的两种方法 */
            /* 默认值是basealign，设置成top就行了 */
            vertical-align: top;
            /* display: block; */
        }
        .item .top .cover{
            /* 脱标 且变成绝对定位元素 就算是行内元素，也可以设置大小了 */
            position: absolute;
            /* 直接用定位，动态设置盒子大小，因为width和height为auto，会自动设置的 */
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

            /* 宽度和高度不要写死 */
            /* width: 140px;
            height: 140px; */
            /* 透明的黑 */
            /* background-color: rgba(0, 0, 0, .5); */

            /* 设置背景图片 */
            background-image: url(../images/music_sprite_01.png);
            background-position: 0 0;
        }

        .item .top .info{
            position: absolute;
            /* 直接right和left设置成0，相当于width:100% 同时这里不能top和bottom同时0，否则高度也100% */
            right: 0;
            bottom: 0;
            left: 0;
            /* 手动设置高度 */
            height: 27px;
            line-height: 27px;

            /* 不能用margin-left，想想绝对元素的大小计算 */
            /* margin-left: 10px; */
            /* 使用padding就没关系 */
            padding-left: 10px;

            font-size: 12px;
            color: #ccc;

            /* 下面这两个值直接去源网站偷就是了 */
            background-image: url(../images/music_sprite_01.png);
            background-position: 0 -537px;
        }
        .item .top .info .icon-music{
            /* 微调 */
            position: relative;
            top: 2px;
            display: inline-block;
            width: 14px;
            height: 11px;
            /* background-color: aqua; */
            background-image: url(../images/music_sprite_02.png);
            background-position: 0 -24px;
        }
        .item .top .info .count{
            margin-left: 4px;
        }

        .item .top .info .icon-play{
            /* 垂直居中显示，绝对的居中 */
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
            right: 10px;

            display: inline-block;
            width: 16px;
            height: 17px;
            background-image: url(../images/music_sprite_02.png);
            background-position: 0 0;
        }

        /* 底部样式 */
        .item .bottom{
            /* 原本是行内，但是建议最好改成独占一行 */
            display: block;
            margin-top: 8px;
            font-size: 14px;
        }
        .item .bottom:hover{
            text-decoration: underline;
        }

    </style>
</head>
<body>
    <div class="item">
        <div class="top">
            <!-- img撑大的盒子底部是会有一点间隙的 -->
            <img src="../images/music_album01.jpg" alt="音乐封面">
            <!-- 覆盖层 -->
            <a class="cover" href="#"></a>
            <div class="info">
                <i class="icon-music"></i>
                <span class="count">62万</span>
                <i class="icon-play"></i>
            </div>
        </div>
        <a class="bottom" href="#">
            天气好的话，耳机分我一半吧
        </a>
    </div>
</body>
</html>